<template>
      <!-- <div class="tags">
        <el-tag
          v-for="tag in hotTags"
          :key="tag.tagId"
          type="info"
          effect="plain"
          class="tag-item"
          @click="handleTagClick(tag)"
        >
          {{ tag.tagName }}
        </el-tag>
      </div> -->
    <!-- 热门标签 -->
    <div class="sidebar-section">
            <h3 class="sidebar-title">热门标签</h3>
            <div class="hot-tags">
              <el-tag 
                v-for="tag in hotTags" 
                :key="tag.tagId"
                :type="getTagType(tag)"
                class="hot-tag-item"
                @click="handleTagClick(tag)"
              >
                {{ tag.tagName }}
              </el-tag>
            </div>
          </div>
  </template>
  
  <script setup>
  import { ref , onMounted} from 'vue' // 添加 ref 导入
  import { useRouter } from 'vue-router' // 导入路由钩子函数
  const router = useRouter() // 获取路由对象

  const hotTags = ref([])
  
  // 假设你有一个获取热门标签的函数
  const fetchHotTags = async () => {
    const response = await fetch('/app/tags/hot')
    const data = await response.json()
    hotTags.value = data.data
  }

// 获取标签类型样式
const getTagType = (tag) => {
  if (tag.isHot) return 'danger'
  if (tag.usageCount > 100) return 'warning'
  if (tag.usageCount > 50) return 'success'
  return 'primary'
}

  // 组件加载时获取热门标签
  onMounted(() => {
    fetchHotTags()
  })
  const handleTagClick = (tag) => {
    console.log(tag.tagId);
    // 跳转到标签详情页面，传递标签ID作为参数
    router.push({ name: 'Hot', params: { tagId: tag.tagId } })
  }
  </script>
  
  <style scoped>
  .tag-cloud {
    margin-bottom: 20px;
  }
  
  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .tag-item {
    cursor: pointer;
  }

  .sidebar-section {
          background-color: #fff;
          border-radius: 8px;
          padding: 15px;
          margin-bottom: 20px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
          
          .sidebar-title {
            margin-top: 0;
            margin-bottom: 15px;
            font-size: 16px;
            color: #333;
            padding-bottom: 8px;
            border-bottom: 1px solid #eee;
          }
        }

        .hot-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          
          .hot-tag-item {
            cursor: pointer;
            transition: all 0.2s;
            
            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            }
          }
        }
  </style>